<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排名展示</title>
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>

<table id="gradeList" lay-filter="gradeTable"></table>
<div id="main" style="width: 1000px;height:700px;"></div>

<script src="./layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script src="./js/echarts.min.js" charset="utf-8" type="application/javascript"></script>

<script type="text/javascript" charset="utf-8">
    var myChart = echarts.init(document.getElementById('main'));

    layui.use([ "table", "jquery" ], function() {
        var table = layui.table,
            $ = layui.$;

        var tableIns = table.render({
            elem : '#gradeList',
            cols : [ [ {
                type : 'checkbox'
            }, {
                field : "teacherName",
                title : "教师姓名",
                align : "center",
            }, {
                field : "courseName",
                title : "课程名",
                align : "center"
            }, {
                field : "studentScore",
                title : "学生方面(平均分)",
                align : "center",
                sort: true
            }, {
                field : "teacherScore",
                title : "老师方面(平均分)",
                align : "center",
                sort: true
            },{
                field : "researchScore",
                title : "教研室方面(平均分)",
                align : "center",
                sort: true
            },{
                field : "departmentScore",
                title : "系部方面(平均分)",
                align : "center",
                sort: true
            },{
                field : "totalScore",
                title : "总分数(平均分)",
                align : "center",
                sort: true
            }] ],
            url : '/evaluation/grade/list',
            cellMinWidth : 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            page : true,
            limits : [ 3, 5, 10 ],
            done: function (res, curr, count) {

                /*
                * 在这里可以对接口返回的数据进行一些处理
                * 但这是渲染完成之后的回调 并没有什么卵用
                * */
                console.log(res, curr, count)
                var teacherNames = res.data.map(function (item) {
                    return item.teacherName;
                })
                var studentScores = res.data.map(function (item) {
                    return item.studentScore;
                })
                var teacherScores = res.data.map(function (item) {
                    return item.teacherScore;
                })
                var researchScores = res.data.map(function (item) {
                    return item.researchScore;
                })
                var departmentScores = res.data.map(function (item) {
                    return item.departmentScore;
                })
                var totalScores = res.data.map(function (item) {
                    return item.totalScore;
                })
                var option = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['学生方面', '教师方面','教研室方面','系部方面','总分数(平均分)']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis:  {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        // data: ['周一','周二','周三','周四','周五','周六','周日']
                        data: teacherNames
                    },
                    series: [
                        {
                            name: '学生方面',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            // data: [320, 302, 301, 334, 390, 330, 320]
                            data: studentScores
                        },
                        {
                            name: '教师方面',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            // data: [120, 132, 101, 134, 90, 230, 210]
                            data: teacherScores
                        },
                        {
                            name: '教研室方面',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            // data: [220, 182, 191, 234, 290, 330, 310]
                            data: researchScores
                        },
                        {
                            name: '系部方面',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            // data: [150, 212, 201, 154, 190, 330, 410]
                            data: departmentScores
                        },
                        {
                            name: '总分数(平均分)',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            // data: [820, 832, 901, 934, 1290, 1330, 1320]
                            data: totalScores
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });


    });
</script>
</body>
</html>